<template>
  <div class="newsinfo-container">

    <!-- 大标题 -->
      <h4 class="title">{{newsinfo.title}}</h4>

<!-- 子标题 -->
      <p class="subtitle">
        <span>发表时间：{{newsinfo.add_time|dateFormat}}</span>
        <span>点击此处：{{newsinfo.click}}次</span>
      </p>
      <hr>

      <!-- 内容 -->
      <div class="content" v-html="newsinfo.content"></div>

         <!-- 评论子组件 -->
         <comment-box></comment-box>

  </div>
</template>


<script>

import {Toast} from 'mint-ui'

    //1、导入 子组件

   import comment from '../subcomponents/comment.vue'

    export default{
      data(){
        return{
       newsinfo:{}//新闻数据
        };
      },
      created(){
        this.getNewsInfo();
      },
      methods:{
        getNewsInfo(){  //获取新闻详情
            //1、获取当前新闻id
            //2、发送数据请求，获取新闻数据
            //3、把新闻数据，保存到datashang 
            //4、渲染页面
          var id = this.$route.params.id;
          //pormise的使用
          this.$http.get('api/getnew/'+id).then(result=>{
              if(result.body.status===0){
                 //将新闻数据保存到data
                 this.newsinfo = result.body.message[0]
              }else{
                   Toast("获取新闻详情失败")
               }
          });
         
        }
      },
      components:{  //注册自己的私有组件
      
        'comment-box':comment
          
      }
    }
</script>


<style lang="scss" >
.newsinfo-container{
   padding:0 3px;
    .title{
      color:#226aff;
      font-size:14px;
      text-align:center;
      margin:15px 0;
    }
    .subtitle{
      color:#226aff;
      font-size:12px;
      display:flex;
      justif-content:space-between;
    }
    .content{
      img{
        width:100%;
      }
    }
}

</style>
